<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舆情数据分析</title>
    <link rel="stylesheet" href="http://unpkg.com/layui@2.6.8/dist/css/layui.css">
    <link rel="stylesheet" href="./index.css">
    <script src="./echarts.min.js"></script>
</head>

<body>
    <div>
        <div class="layui-row">
            <form class="layui-form layui-col-md12 x-so" action="" method="get">
                <div>
                    <label class="layui-form-label">时间：</label>
                    <div class="layui-inline layui-date-range" id="test-range">
                        <div class="layui-input-inline">
                            <input type="text" name="start_time" id="start_time" class="layui-input" placeholder="开始时间">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" name="end_time" id="end_time" class="layui-input" placeholder="结束时间">
                        </div>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">所属区域：</label>
                    <div class="layui-input-block">
                        <select name="region" id="region" lay-filter="region" lay-verify="required" lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="layui-form-label">项目名称：</label>
                    <div class="layui-input-block">
                        <select name="project_id" id="project_id" lay-filter="project_id" lay-verify="required"
                            lay-search="">
                            <option value="">全部</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="layui-btn" onclick="getData()">查询</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="initial()">重置</button>
            </form>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="order_list order_list1">

            </div>
            <!--  -->
            <div class="order_list">
                <div class="order_echarts">
                    <div class="order_item_title">舆情类型</div>
                    <div class="order_item_echarts mt30">
                        <div id="main" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
                <div class="order_echarts">
                    <div class="order_item_title">舆情等级</div>
                    <div class="order_item_echarts mt30">
                        <div id="main2" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
            </div>
            <!--  -->
            <div class="order_list">
                <div class="order_echarts">
                    <div class="order_item_title">舆情关闭率</div>
                    <div class="order_item_echarts mt30">
                        <div id="main3" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="http://unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script src="./index.js"></script>
<script>
    var laydate = layui.laydate;
    laydate.render({
        elem: '#test-range',
        range: ['#start_time', '#end_time']
    });

    let data = {}

    // 获取数据
    getData()

    function getData() {
        $.ajax({
            type: 'post',
            url: 'http://xdwy-develop.huijik.com/base/public_opinion_data',
            data: {
                start_time: $('#start_time').val(),
                end_time: $('#end_time').val(),
                project_id: $('#project_id').val(),
                region_id: $('#region').val(),
            },
            dataType: 'json',
            success: function (res) {
                data = res.data

                echartsInit()

                $('.order_list1').html(`<div class="order_item">
                                            <div class="flex flex-align flex-between">
                                                <div>
                                                    <div class="order_item_title">舆情数量</div>
                                                </div>
                                            </div>
                                            <div class="order_item_num">
                                                <p><span>${data.num}</span>人</p>
                                            </div>
                                        </div>
                                        <div class="order_item">
                                            <div class="flex flex-align flex-between">
                                                <div>
                                                    <div class="order_item_title">舆情关闭率</div>
                                                </div>
                                            </div>
                                            <div class="order_item_num">
                                                <p><span>${data.close}</span>%</p>
                                            </div>
                                        </div>
                                        <div class="order_item hide">

                                        </div>`)
            }
        })
    }


    function echartsInit() {
        var myChart = echarts.init(document.getElementById('main'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        var myChart3 = echarts.init(document.getElementById('main3'));

        // 舆情类型
        let category = []
        for (let i in data.category) {
            category.push({
                value: data.category[i],
                name: i
            })
        }

        var option1 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '0%',
                left: 'center'
            },
            series: [{
                type: 'pie',
                top: '10%',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                data: category
            }]
        };

        // 舆情等级
        let rating = []
        for (let i in data.rating) {
            rating.push({
                value: data.rating[i],
                name: i
            })
        }

        var option2 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '0%',
                left: 'center'
            },
            series: [{
                type: 'pie',
                top: '10%',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                data: rating
            }]
        };


        // 舆情关闭率
        var option3 = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '0%',
                left: 'center'
            },
            graphic: {
                type: "text",
                left: "center",
                top: "center",
                style: {
                    text: data.close_rate + '%',
                    textAlign: "center",
                    fill: "#000",
                    width: 30,
                    height: 30,
                    fontSize: 32
                }
            },
            series: [{
                type: 'pie',
                top: '10%',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2,
                    normal: {
                        label: {
                            show: true,
                            formatter: function (val) {
                                //让series 中的文字进行换行
                                return val.name + " " + val.value;
                            }
                        },
                    },
                },
                data: [{
                    value: data.close_rate,
                    name: '已关闭'
                }, {
                    value: data.close - data.close_rate,
                    name: '未关闭'
                }]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option1);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
    }

    // 重置
    function initial() {
        $('#start_time').val('')
        $('#end_time').val('')
        $('#project_id').val('')
        $('#region').val('')
    }
</script>

</html>